import React, { useState, useRef, useEffect } from 'react'
import { Modal, Button, Form, Input, Select } from "antd"
import api from '../../../api'
import { addZw } from '../../../service/system/basicInfo'

const { Option } = Select;
const handleChange = (value) => {
    console.log(`selected ${value}`);
};
let deptNameArr = JSON.parse(sessionStorage.getItem("deptName")) ? JSON.parse(sessionStorage.getItem("deptName")) : []




export default function Mtk(props) {
    const [isShow, setIsShow] = useState(false)
    const positionRefName = useRef()
    const positionRefDes = useRef()
    const { TextArea } = Input;
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    // 部门数据
    let departData = props.props[3] ? props.props[3] : deptNameArr

    useEffect(() => {
        // console.log('effect');
        // console.log(JSON.parse(sessionStorage.getItem("deptName")));
    }, [isShow])

    // console.log(props.props);

    function deptName(id, deptArr) {
        for (let i = 0; i < deptArr; i++) {
            if (id === deptArr[i].deptno) {
                return deptArr[i].dept_name
            }
        }
    }

    function OptionArr() {
        // console.log(deptNameArr);
        const arr = []
        // const arr = JSON.parse(sessionStorage.getItem("deptName")) ? JSON.parse(sessionStorage.getItem("deptName")) : []
        for (let i = 0; i < departData.length; i++) {
            arr.push(<Option key={i} value={departData[i].deptno}>{departData[i].dept_name}</Option>)
        }
        return arr
    }


    // 确认
    function ok(e) {
        // console.log(e);
        // console.log(positionRefName);
        setTimeout(() => {
            setIsShow(false)
        }, 1000)

    }

    // 取消
    function cancel() {
        setIsShow(false)
    }

    return (
        <div className='mtk'>
            {props.props[0] === "添加" ? <Button type="default" onClick={() => setIsShow(true)
            }>{props.props}
            </Button> : <span onClick={() => setIsShow(true)
            }>编辑</span>}
            <Modal
                title={props.props[0] + "职位"}
                centered
                okText="确认"
                cancelText="取消"
                visible={isShow}
                onOk={ok}
                onCancel={cancel}
                width={600}
            >
                <Form
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 14,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    layout="horizontal"
                // onValuesChange={onFormLayoutChange}
                >
                    <Form.Item label="部门"
                        name="department"
                        rules={[
                            {
                                required: true,
                                message: '请选择部门!',
                            },
                        ]}>
                        <Select
                            defaultValue={deptName(props.props[2], departData)}
                            // initialValues="lucy"
                            style={{
                                width: '100%',
                            }}
                            onChange={handleChange}
                        >
                            {OptionArr()}
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="职位名称"
                        name="zwName"
                        rules={[
                            {
                                required: true,
                                message: '请输入职位名称!',
                            },
                        ]}
                    >
                        <Input onChange={e => {
                            // this.setState({ productName: e.target.value });
                            console.log(positionRefName.current.input.value);
                        }} ref={positionRefName} allowClear={true}

                            placeholder='请输入职位名称' />
                    </Form.Item>

                    <Form.Item label="描述"
                        name="describe"
                        rules={[
                            {
                                required: true,
                                message: '请输入描述!',
                            },
                        ]}>
                        <TextArea ref={positionRefDes} allowClear={true} placeholder='请输入内容' rows={4} />
                    </Form.Item>
                </Form>
            </Modal>
        </div >
    )
}
